<template>
  <div class="user">
    <div class="back-wrapper">
      <i class="icon-back" @click="$router.back()"></i>
    </div>
    <div class="switch-wrapper">
      <switch-btn :switches="switches" @choose="chooseComponent"></switch-btn>
    </div>
    <div class="play-btn" v-show="name !== 'no-result'">
      <my-button size="medium" color="gray" class="btn" @click="randomPlay(calData)"></my-button>
    </div>
    <div class="component-wrapper">
      <component class="list" :is="name" :songs="calData" :txt="txt" @select="selectSong"></component>
    </div>
  </div>
</template>

<script>
  import switchBtn from "@/base/switch/switchBtn";
  import myButton from "@/base/button/myButton";
  import LikeMusic from "@/base/like-list/LikeMusic";
  import recent from "@/base/recent/recent";
  import noResult from "@/base/no-result/noResult";
  import {mapGetters} from 'vuex'
  import {randomPlayOptions, selectOptions} from "@/common/js/mixin";
  import {method} from "@/config/mode-config/config";

  export default {
        mixins: [selectOptions,randomPlayOptions],
        components: {
            switchBtn,
            myButton,
            'like': LikeMusic,
            'recent': recent,
            'no-result': noResult
        },
        data(){
            return {
                switches: [
                    {name: '我喜欢的',val: 'like'},
                    {name: '最近播放',val: 'recent'}
                ],
                name: '',
                txt: '暂时没有喜欢的音乐'
            }
        },
        mounted(){
            this.setFlag(method.addAll)
            this.initName()
        },
        computed: {
            ...mapGetters('user',['likes','recent']),
            calData(){
                if(this.name == 'no-result')  return
                if(this.name == 'like')
                    return this.likes
                else
                    return this.recent
            },
        },
        methods: {
            initName(){
                if (this.likes.length > 0)
                    this.name = 'like'
                else
                    this.name = 'no-result'
            },
            chooseComponent(name){
                if(name == 'recent' && !this.recent.length){
                    this.name = 'no-result'
                    this.txt = '暂时没有播放的音乐'
                    return
                }
                if (name == 'like' && !this.likes.length){
                    this.name = 'no-result'
                    this.txt = '暂时没有喜欢的音乐'
                    return
                }
                if(name !== this.name)
                    this.name = name
            }
        },
        watch: {
            likes(newVal){
               if(!newVal.length)
                   this.name = 'no-result'
                else
                    this.name = 'like'
            }
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .user
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    background $color-background
    .back-wrapper
      position absolute
      top 1.3rem
      left .6rem
      .icon-back
        color $color-theme
        font-size 1.7rem
    .switch-wrapper
      margin-top 1rem
    .play-btn
      .btn
        margin 1.5rem auto
    .component-wrapper
      position fixed
      top 20%
      bottom 60px
      left 0
      right 0
      .list
        overflow hidden
        height 100%
</style>
